<template>
  <el-card class="navbar">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <div v-if="showConfirm" class="confirm">

          <!-- 确定按钮 -->
          <el-button height="60px" type="primany">
            <i :class="iconConfirm" />确定
          </el-button>
        </div>
      </el-col>
      <el-col>
        <div class="title">
          <!-- 标题插槽 -->
          <slot name="title">
            <h2>{{ title }}</h2>
          </slot>
        </div>
      </el-col>
      <el-col>
        <el-row v-if="showBack">
          <!-- 返回按钮 -->
          <el-button height="60px" type="danger">
            <i :class="iconBack" />返回
          </el-button>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props: {
    //   是否展示前插槽 默认不展示
    showConfirm: {
      type: Boolean,
      default: false
    },
    showBack: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '标题'
    },
    iconConfirm: {
      type: String,
      default: ''
    },
    iconBack: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang='scss'>

</style>
